<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>


    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/assets/localpic/103.jpg}">

    <!-- CSS
    ========================= -->
    <!--bootstrap min css-->
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}">
    <!--owl carousel min css-->
    <link rel="stylesheet" th:href="@{/assets/css/owl.carousel.min.css}">
    <!--slick min css-->
    <link rel="stylesheet" th:href="@{/assets/css/slick.css}">
    <!--magnific popup min css-->
    <link rel="stylesheet" th:href="@{/assets/css/magnific-popup.css}">
    <!--font awesome css-->
    <link rel="stylesheet" th:href="@{/assets/css/font.awesome.css}">
    <!--ionicons css-->
    <link rel="stylesheet" th:href="@{/assets/css/ionicons.min.css}">
    <!--7 stroke icons css-->
    <link rel="stylesheet" th:href="@{/assets/css/pe-icon-7-stroke.css}">
    <!--animate css-->
    <link rel="stylesheet" th:href="@{/assets/css/animate.css}">
    <!--jquery ui min css-->
    <link rel="stylesheet" th:href="@{/assets/css/jquery-ui.min.css}">
    <!--plugins css-->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">

    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">

    <!--modernizr min js here-->
    <script th:src="@{/assets/js/vendor/modernizr-3.7.1.min.js}"></script>

    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<script>
    function test(){

        //定义全局变量
        var keyword = $("#keyword").val();
        var wb = document.getElementById("WB");
        var childs='';
        $.post(
            "/keySearch",//url
            "keyword="+ keyword,//发送的数据
            function(data){//获取响应回来的数据
                if (data == "") {
                    //把childs 这div集合放入到下拉提示框的父div中，上面我们以获取了
                    sel.innerHTML = "没有这个东西";
                    sel.style.display = "block";
                    return;
                }
                document.getElementById("sel").innerHTML="";

                var data=JSON.parse(data);

                for(var i=0;i<data.length;i++) {//循环每一个满足条件的记录
                    //将当前循环足条件的商品名称生成一个下拉的选项
                    childs += "<li onclick=Write(this) onmouseout=recoverColorwhenMouseout(this) onmouseover=changeColorwhenMouseover(this)>"
                        +data[i].productName+
                        "</li>";
                    console.log(data[i].productName);
                }

                sel.innerHTML=childs;
                //判断是否有满足条件的商品
                if(data.length>0){
                    sel.style.display='block';
                }else{
                    sel.style.display='none';
                }


                //当用户按下上下键时获取相应的值
                if(event.keyCode==40){
                    sel.focus();
                }
            },
            //发送数据类型
            "text"
        );
    }
</script>



<body>
<!--breadcrumbs area start-->
<div class="breadcrumbs_area  breadcrumbs_bg" data-bgimg="images/background1.jpg" style="margin-bottom: 0px">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb_content">
                    <h3>账户</h3>
                    <ul>
                        <li><a th:href="@{/}">回到首页</a></li>
                        <li>我的账户</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--breadcrumbs area end-->

<!-- my account start  -->
<section class="main_content_area" data-bgimg="images/background1.jpg" style="height: 2500px">
    <div class="container">
        <div class="account_dashboard">
            <div class="row">
                <div class="col-sm-12 col-md-3 col-lg-3">
                    <!-- Nav tabs -->
                    <div class="dashboard_tab_button">
                        <ul role="tablist" class="nav flex-column dashboard-list">
                            <li><a href="#WB" data-toggle="tab" class="nav-link">我的博客</a></li>
                            <li><a href="#WH" data-toggle="tab" class="nav-link">我赠送过的礼物</a></li>
                            <li><a href="#WriteThanks" data-toggle="tab" class="nav-link">写感谢信</a></li>
                            <li><a href="#UpdateUser" data-toggle="tab" class="nav-link">修改个人信息</a></li>
                            <li><a th:href="@{/}" class="nav-link">首页</a></li>
                            <li><a href="login.html" class="nav-link">安全退出账户</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-12 col-md-9 col-lg-9">
                    <!-- Tab panes -->
                    <div class="tab-content dashboard_content">
                        <div class="tab-pane fade " id="WB">
                            <h3>我的所有博客</h3>
                            <footer class="blog_footer">
                                <a class="button" th:href="@{/goods/toInsert}">新增一篇博客</a>
                            </footer>
                            <div class="blog_wrapper" th:each="blog:${goods}">
                                <div class="single_blog">
                                    <div class="blog_thumb" style="width: 370px;height: 235.45px">
                                        <a href="#"><img th:src="${blog.getPic()}" alt=""></a>
                                    </div>
                                    <div class="blog_content">
                                        <div class="post_date">
                                            <span>Posted by: <a href="#">[[${user.getName()}]]</a> / On : <a href="#">[[${blog.getDate()}]]</a></span>
                                        </div>
                                        <h4 class="post_title"><a href="#">[[${blog.getProductName()}]]</a></h4>
                                        <p style=" overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
                                                -webkit-line-clamp: 4; -webkit-box-orient: vertical;">
                                            [[${blog.getDescription()}]]</p>
                                        <footer class="blog_footer">
                                            <a th:href="@{/goods/good/}+${blog.getId()}">+ 查看详情</a>
                                        </footer>
                                    </div>
                                </div>

                            </div>
                            <!--blog pagination area start-->

                            <!--blog pagination area end-->
                        </div>
                        <div class="tab-pane fade " id="WH">
                            <h3>赠送过的礼物</h3>
                            <footer class="blog_footer">
                                <a class="button" th:href="@{/goods/showAll}">看看其他需要帮助的孩子</a>
                            </footer>
                            <div class="table_desc wishlist">
                                <div class="cart_page table-responsive">
                                    <table>
                                        <thead>
                                        <tr>

                                            <th class="product_thumb">图片</th>
                                            <th class="product_name">礼物名字</th>
                                            <th class="product_quantity">当前状态</th>



                                        </tr>
                                        </thead>
                                        <tbody >
                                        <tr th:each="afg:${afgs}">
                                            <td class="product_thumb" style="height: 147.69px"><a href="#"><img th:src="${picMap.get(afg.getId())}" alt=""></a></td>
                                            <td class="product_name"><a href="#">[[${nameMap1.get(afg.getId())}]]</a></td>
                                            <td class="product_quantity"th:switch="${afg.getState()}">
                                                <p th:case="'0'">还未收到回应<a th:href="@{/finishThis/}+${afg.getId()}">确认完成</a></p>
                                                <p th:case="'1'">已成功结束,谢谢您</p>
                                            </td>
                                        </tr>




                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                        <div class="tab-pane fade" id="WriteThanks">
                            <h3>写感谢信</h3>
                            <div class="login">
                                <div class="login_form_container">
                                    <div class="account_login_form">
                                        <form th:action="@{/sendMail}">

                                            <label>主题</label>
                                            <input type="text" name="subject">
                                            <label>内容</label>
                                            <div>
                                            <textarea type="text" name="content" style="width: 500px;height: 256px"></textarea>
                                            </div>
                                            <label>收信人</label>
                                            <input type="text" name="receiver">
                                            <input type="hidden" name="userEmail" th:value="${user.getEmail()}">

                                            <div class="save_button primary_btn default_button">
                                                <button type="submit" class="button">发送</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            </div>
                        <div class="tab-pane fade" id="UpdateUser">
                            <h3>修改用户信息</h3>
                            <div class="login">
                                <div class="login_form_container">
                                    <div class="account_login_form">
                                        <form th:action="@{/updateUser}">
                                            <input type="hidden" name="id" th:value="${user.getId()}">
                                            <label>姓名</label>
                                            <input type="text" name="name" th:value="${user.getName()}">
                                            <label>密码</label>
                                            <input type="text" name="pwd" th:value="${user.getPwd()}">
                                            <input type="hidden" name="money" th:value="${user.getMoney()}">
                                            <input type="hidden" name="role" th:value="${user.getRole()}">
                                            <label>邮箱</label>
                                            <input type="text" name="email" th:value="${user.getEmail()}">
                                            <label>地址</label>
                                            <input type="text" name="address" th:value="${user.getAddress()}">
                                            <input type="hidden" name="photo" th:value="${user.getPhoto()}">

                                            <div class="save_button primary_btn default_button">
                                                <button type="submit">修改</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>






                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- my account end   -->




<!-- JS
============================================ -->
<!--jquery min js-->
<script th:src="@{/assets/js/vendor/jquery-3.5.0.min.js}"></script>
<!--popper min js-->
<script th:src="@{/assets/js/popper.js}"></script>
<!--bootstrap min js-->
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<!--owl carousel min js-->
<script th:src="@{/assets/js/owl.carousel.min.js}"></script>
<!--slick min js-->
<script th:src="@{/assets/js/slick.min.js}"></script>
<!--magnific popup min js-->
<script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
<!--jquery countdown min js-->
<script th:src="@{/assets/js/jquery.countdown.js}"></script>
<!--jquery ui min js-->
<script th:src="@{/assets/js/jquery.ui.js}"></script>
<!--jquery elevatezoom min js-->
<script th:src="@{/assets/js/jquery.elevatezoom.js}"></script>
<!--isotope packaged min js-->
<script th:src="@{/assets/js/isotope.pkgd.min.js}"></script>
<!-- Plugins JS -->
<script th:src="@{/assets/js/plugins.js}"></script>

<!-- Main JS -->
<script th:src="@{/assets/js/main.js}"></script>

</body>
</html>